<template>
    <div>
        <!--搜索输入框-->
        <div>
            <el-input
                    style="display: inline-block;width: 150px;margin-right: 20px;margin-bottom: 10px"
                    size="mini"
                    placeholder="请输入小区名称"
                    v-model="queryForm.searchName">
            </el-input>
            <el-input
                    style="display: inline-block;width: 150px;margin-right: 20px;margin-bottom: 10px"
                    size="mini"
                    placeholder="请输入小区编号"
                    v-model="queryForm.searchCode">
            </el-input>
            <el-button type="primary" class="el-icon-search" size="mini" @click="searchLoad()">搜索</el-button>
            <el-button type="info" class="el-icon-refresh" size="mini" @click="cleanSearch()" plain>重置</el-button>
        </div>
        <!--按钮-->
        <div>
                <el-row style="display: inline-block; margin-right: 15px">
                    <el-button type="primary" class="el-icon-plus" size="mini" plain @click="loadShow">新增</el-button>
                </el-row>
                <el-row style="display: inline-block; margin-right: 15px">
                    <el-button type="danger" class="el-icon-delete" size="mini" :disabled="multiple" @click="deleteAll">删除</el-button>
                </el-row>
                <el-row style="display: inline-block; margin-right: 15px">
                    <el-button type="warning" class="el-icon-download" size="mini" plain @click="excelUpload">导出</el-button>
                </el-row>
        </div>
        <!--添加或者修改-->
        <div>
            <el-dialog title="小区信息" :visible.sync="dialogFormVisible">
                <el-form :model="community" size="small" label-width="100px">
                    <el-form-item label="小区名称">
                        <el-input v-model="community.communityName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="小区编号">
                        <el-input v-model="community.communityCode" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="小区地址">
                        <el-cascader
                                v-model="selectedOptions"
                                :options="options"
                                size="large">
                        </el-cascader>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="community.remark" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="bt">确 定</el-button>
                </div>
            </el-dialog>
        </div>
        <!--表格显示-->
        <div>
            <el-table
                    :data="communitys"
                    @selection-change="handleSelectionChange"
            style="width: 100%">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        label="序号"
                        width="120"
                        :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.communityId }}</template>
                </el-table-column>
                <el-table-column
                        label="小区名称"
                        width="120">
                    <template slot-scope="scope">{{ scope.row.communityName }}</template>
                </el-table-column>
                <el-table-column
                        label="小区编号"
                        :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.communityCode }}</template>
                </el-table-column>
                <el-table-column
                        label="省"
                        >
                    <template slot-scope="scope">{{ scope.row.province.name }}</template>
                </el-table-column>
                <el-table-column
                        label="市"
                        >
                    <template slot-scope="scope">{{ scope.row.city.name }}</template>
                </el-table-column>
                <el-table-column
                        label="区/县"
                        width="120">
                    <template slot-scope="scope">{{ scope.row.town.name }}</template>
                </el-table-column>
                <el-table-column
                        label="创建时间"
                        :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.createTime }}</template>
                </el-table-column>
                <el-table-column
                        label="备注"
                        width="120">
                    <template slot-scope="scope">{{ scope.row.remark }}</template>
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="120">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-edit"
                                @click="handleUpdate(scope.$index,scope.row)">修改
                        </el-button>
                        <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-delete"
                                @click="handleDelete(scope.$index,scope.row)">删除
                        </el-button>
                        <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-setting"
                                @click="replaceProperty(scope.row)">更换物业
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div>
            <!--分页控件-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="current"
                    :page-sizes="[2, 4, 6]"
                    :page-size="size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total" align="left">
            </el-pagination>
        </div>
        <!--更换物业-->
            <el-dialog title="物业" :visible.sync="property" width="700px" append-to-body>
                <el-table
                        :data="depts"
                        row-key="deptId"
                        default-expand-all
                        :tree-props="{children: 'depts'}">
                    <el-table-column prop="deptName" label="物业名称" width="260"></el-table-column>
                    <el-table-column prop="status" label="状态" width="100"></el-table-column>
                    <el-table-column label="创建时间" align="center" prop="createTime" width="200"></el-table-column>
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="text"
                                    v-if="scope.row.deptId !== selectDeptId"
                                    icon="el-icon-success"
                                    @click="replacePropertyAction(scope.row)"
                            >选择</el-button>
                            <el-button
                                    size="mini"
                                    type="text"
                                    v-if=" scope.row.deptId === selectDeptId"
                                    icon="el-icon-check"
                            >已选择</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>
    </div>
</template>

<script>
    import areas from "@/components/areas"
    import axios from 'axios'
    const hashMap = {}
    var temp = false
    export default {
        name: "Community",
        data() {
            return {
                //总条数
                total: 0,
                //当前页
                current: 1,
                //每页多少条
                size: 2,
                //小区集合
                communitys: [],
                community: {
                    communityId: "",
                    communityName: "",
                    communityCode: "",
                    communityProvenceCode: "",
                    communityCityCode: "",
                    communityTownCode: "",
                    createTime: "",
                    deptId:"",
                    remark: ""
                },
                // 搜索框
                queryForm:{
                    searchName:"",
                    searchCode:"",
                },
                //消息框
                dialogFormVisible: false,
                //单个禁用
                single: true,
                //非多个禁用
                multiple: true,
                //多删数组
                ids: [],
                //数据库省市区绑定数组
                options: [],
                //当前选择的数据
                selectedOptions: [],
                regionValue: [],
                //物业弹出框
                property:false,
                //物业信息
                depts:[],
                //临时的部门id
                selectDeptId:""
            }
        },
        methods: {
            //显示
            loadCommunity(current,size) {
                this.community.communityName = this.queryForm.searchName;
                this.community.communityCode = this.queryForm.searchCode;
                this.axios.post("http://localhost:8080/communitying/pages?current="+this.current+"&size="+this.size,this.community)
                    .then(({data}) => {
                        data.data.records.forEach((item)=>{
                            setTimeout(()=>{
                                item.province = hashMap[item.communityProvenceCode]
                                item.city = hashMap[item.communityCityCode]
                                item.town = hashMap[item.communityTownCode]
                            },500)
                        })
                        this.communitys = data.data.records;
                        console.log(this.communitys);
                        this.current = data.data.current;
                        console.log(this.current);
                        this.total = data.data.total;
                        console.log(this.total);
                        this.size = data.data.size;
                        console.log(this.size);
                    })
            },
            //页里面的条数发生改变
            handleSizeChange(val){
                this.size = val;
                console.log(this.size);
                this.loadCommunity(this.current,this.size)
            },
            //页数发生改变
            handleCurrentChange(val){
                this.current = val;
                this.loadCommunity(this.current,this.size)

            },
            //点击搜索时触发事件
            searchLoad(){
                this.current = 1;
                this.loadCommunity(this.current,this.size);
            },
            //点击重置触发事件
            cleanSearch(){
                this.queryForm={
                    searchName:"",
                    searchCode:"",
                },
                    this.current=1;
                    this.loadCommunity(this.current,this.size);
            },
            //点击新增时触发事件
            loadShow(){
                this.dialogFormVisible = true;
                this.regionValue = [];
                this.selectedOptions = [];
                this.community ={
                    communityId: "",
                    communityName: "",
                    communityCode: "",
                    communityProvenceCode: "",
                    communityCityCode: "",
                    communityTownCode: "",
                    createTime: "",
                    deptId:"",
                    remark: ""
                }
            },
            //添加或修改
            bt() {
                console.log(this.regionValue);
                this.community.communityProvenceCode = this.regionValue[0].code;
                this.community.communityCityCode = this.regionValue[1].code;
                this.community.communityTownCode = this.regionValue[2].code;
                if (temp==true) {
                    //修改发送put请求
                    this.axios.put("http://localhost:8080/community",this.community)
                        .then(res =>{
                            if(res.data.data=="修改成功"){
                                this.$message({
                                    message: '修改成功',
                                    type: 'success'
                                });
                                this.loadCommunity(this.current,this.size);
                            }
                        })
                } else {
                    //添加发送post请求
                    this.axios.post("http://localhost:8080/community", this.community)
                        .then(res => {
                            if (res.data.data = "添加成功") {
                                this.$message({
                                    message: '添加成功',
                                    type: 'success'
                                });
                                this.loadCommunity(this.current,this.size);
                            }
                        })
                }
                temp=false;
                this.dialogFormVisible = false;
            },

            //重置
            reflesh() {
                    this.communityName = '',
                    this.communityCode = ''
                    this.community={
                    communityId: "",
                    communityName: "",
                    communityCode: "",
                    communityProvenceCode: "",
                    communityCityCode: "",
                    communityTownCode: "",
                    createTime: "",
                    deptId:"",
                    remark: ""
                }
            },
            handleTree(data) {
                const tree = []
                data.forEach((item) => {
                    item.value = item.code
                    item.label = item.name
                    hashMap[item.code] = item
                })
                data.forEach((item) => {
                    const parent = hashMap[item.parentId]
                    if (parent) {
                        parent.children = parent.children || []
                        parent.children.push(item)
                    } else {
                        tree.push(item)
                    }
                })
                return tree
            },

            //修改回显
            handleUpdate(index, row) {
                this.selectedOptions = [row.province.code,row.city.code,row.town.code]
                console.log(this.selectedOptions)
                this.community = JSON.parse(JSON.stringify(row));
                temp=true;
                this.dialogFormVisible = true;
            },
            //删除
            handleDelete(index, row) {
                if (confirm("是否删除？")) {
                    this.axios.delete("http://localhost:8080/community/" + row.communityId)
                        .then(res => {
                            if (res.data.data == "删除成功") {
                                this.$message({
                                    message: '删除成功',
                                    type: 'success'
                                });
                                this.current=1;
                                this.reflesh();
                                this.loadCommunity(this.current,this.size);
                            }
                        })
                }
            },

            //多删选中按钮
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.communityId);
                this.single = selection.length !== 1;
                this.multiple = !selection.length
            },

            //多删
            deleteAll(row) {
                const communityIds = row.communityId || this.ids;
                console.log(communityIds);
                if (confirm("是否删除多个?")) {
                    this.axios.post("http://localhost:8080/deleteMany", communityIds)
                        .then(res => {
                            console.log(communityIds)
                            if (res.data.data == "删除成功") {
                                this.$message({
                                    message: '多删成功',
                                    type: 'success'
                                });
                                this.current=1;
                                this.reflesh();
                                this.loadCommunity(this.current,this.size);
                            }
                        })
                }
            },
            //查询所有的物业信息
            getDept(){
                this.axios.get("http://localhost:8080/depts/list").then(
                    res =>{
                        this.depts = res.data.data;
                        console.log(this.depts);
                    }
                )
            },
            //物业按钮回显触发事件
            replaceProperty(row){
                this.property = true;
                this.selectDeptId = row.deptId;
                this.community = JSON.parse(JSON.stringify(row));

            },
            //更换物业触发事件
            replacePropertyAction(row){
                this.community.deptId = row.deptId;
                console.log(this.community.deptId);
                this.axios.put("http://localhost:8080/community/dept",this.community)
                    .then(res =>{
                        if(res.data.data=="修改成功"){
                                this.$message({
                                    message: '修改成功',
                                    type: 'success'
                                });
                            this.property = false;
                            this.loadCommunity(this.current,this.size);
                        }
                    })
            },
            //导出触发事件
            excelUpload(){
                this.axios({
                    method:"post",
                    url:"http://localhost:8080/community/export",
                    data:this.communitys,
                    responseType:"blob"
                }).then(res =>{
                    if (res && res.data) {
                        // 调用js-file-download下载文件，第一个参数是数据流，第二个参数是文件名，我这后端返回时把文件名放到响应的header的filename字段中，所以用这种方式取出
                        this.jsFileDownload(res.data, decodeURIComponent("小区数据.xlsx"))
                    }
                })
            }
        },

        created() {
            this.loadCommunity(this.current,this.size);
            this.getDept();
            axios
                .get("http://localhost:8080/sysArea")
                .then(({data}) => {
                    this.options = this.handleTree(data.data)
                })

        },
        //监听
        watch: {
            selectedOptions: {
                deep: true,
                handler() {
                    this.regionValue=[];
                    this.selectedOptions.forEach((item)=>{
                        this.regionValue.push({code:item,name:hashMap[item].name})
                    })
                }
            },
        }
    }
</script>

<style scoped>

</style>
